<template>
  <div class="admin-page">
    <div class="top-bar">
      <div class="admin-info">
        尊敬的{{adminName}}管理员您好
      </div>
      <el-button type="primary" @click="changePass()">修改密码</el-button>
      <el-button type="primary" @click="logout">退出登录</el-button>
    </div>
    <div class="content">
      <div class="sidebar">
        <ul>
          <li @click="selectNavItem(1)" :class="{ active: selectedNavItem === 1 }">学生管理</li>
          <li @click="selectNavItem(2)" :class="{ active: selectedNavItem === 2 }">老师管理</li>
          <li @click="selectNavItem(3)" :class="{ active: selectedNavItem === 3 }">课堂管理</li>
        </ul>
      </div>
      <div class="main">
        <el-form-item  class="search-form">
          <el-input type="text" v-model="searchQuery" placeholder="输入关键词进行搜索"/>
          <el-button @click="search">搜索</el-button>
        </el-form-item>
         
        <div class="inputDiv">
          <el-form-item label="姓名">
            <el-input v-model="name" />
          </el-form-item>
          <el-form-item label="账号">
            <el-input v-model="name" />
          </el-form-item>
          <el-button class="import-el-button">手动导入</el-button>
        </div>
        <el-button class="import-el-button">批量导入</el-button>
        <el-button class="import-el-button">下载名单</el-button>
        <table>
          <thead>
            <tr>
              <th>学号</th>
              <th>姓名</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="person in people" :key="person.id">
              <td>{{ person.studentId }}</td>
              <td>{{ person.name }}</td>
              <td>
                <el-button @click="editPerson(person)">编辑</el-button>
                <el-button @click="deletePerson(person)">删除</el-button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import {reactive} from 'vue'
const personType=reactive({
  type:''
});
export default {

  data() {
    return {
      adminName: 'xx', // 替换为实际的管理员名字
      searchQuery: '',
      people: [],
      selectedNavItem: null,
      personType
      
    };
  },
  methods: {
    //管理员修改密码
    async changePass(){
      fetch('http://localhost:8080/admine/changePassword',{
        method:'POST',
        body:JSON.stringify({
          admineID:'',
          newPassword:'',
          studentID:''
        })
      })
      .then(res=>res.json())
      .then(result=>{
        if(result.code===200){
          console.log('修改成功')
        }
        console.log('修改失败')
      })
    },
    logout() {
      this.$router.push('./home')
    },
    //选中导航栏时，需要请求对应的数据----全部学生/老师/课程
    async selectNavItem(navItemIndex){
      this.selectedNavItem = navItemIndex;
      switch(navItemIndex){
        case(1):{
          this.personType.type='student';
          break;
        }
        case(2):{
          this.personType.type='teacher';
          break;
        }
        case(3):{
          this.personType.type='course';
          break;
        }
      }
      fetch(`http://localhost:8080/${this.personType.type}/findall`,{
            method: 'GET', // 设置请求方法为POST
          })
          .then(response => response.json())
          .then(result => {
            // 响应成功后的处理逻辑
            this.people=result.data;
          })
          .catch(error => {
            // 错误处理逻辑
            console.error(error);
          });
    },


    search() {
    
    },
    //
    editPerson(person) {
      // 编辑人员信息
    },
    async deletePerson(person) {
      // 删除人员信息-----id要改 ----要获取选中的行index
      fetch(`http://localhost:8080/${this.personType.type}/${studentID}`,{
        method:'POST',
        body:JSON.stringify({
          [studentID]:''
        })
        .then(res=>res.json())
        .then(result=>{
          if(result.code===200){
            //需要在本地中删除这条再渲染新list
            console.log('删除成功')
          }
          console.log('删除失败')
        })
      })
    }
  }
}
</script>

<style>
.admin-page {
  background-color: #f7f9fc;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inputDiv{
  width:35%
}
.import-el-button{
  margin-left:80%;
  margin-top: 0px;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  width: 100%;
}
.sidebar ul li.active {
  background-color: #f7f9fc;
  color: #0f6dd2;
}
.admin-info {
  font-size: 16px;
  font-weight: bold;
  margin-left: 20px;
}


.content {
  display: flex;
  width: 100%;
  height: 100%;
  margin-top: 20px;
}

.sidebar {
  background-color: #fff;
  width: 12%;
  height: 10000px;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  overflow-y: auto;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

.sidebar ul li {
  font-size: 16px;
  line-height: 2.5;
  padding-left: 20px;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}

.sidebar ul li:hover {
  background-color: #f7f9fc;
}

.main {
  flex: 1;
  height: 100%;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,.1);
  margin-left: 20px;
  overflow-y: auto;
}

.search-form {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.search-form input {
  border: none;
  border-radius: 4px;
  /* padding: 8px 12px; */
  font-size: 16px;
  width: 300px;
  margin-right: 10px;
}



button{
  width:80px;
  margin-top: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  color: #444;
}

tr:hover {
  background-color: #f7f9fc;
}

</style>